﻿<!DOCTYPE HTML>
<html>
<head>
   <title>Demo_cavas</title>
   <meta charset="utf-8">
  
</head>
<body>
    <canvas id="myCanvas" /> 
</body>
<script>
	var c=document.getElementById("myCanvas");
	var ctx=c.getContext("2d");

	// Create gradient
	var grd1=ctx.createLinearGradient(0,0,200,0);
	grd1.addColorStop(0,"red");
	grd1.addColorStop(1,"white");

	// Fill with gradient
	ctx.fillStyle=grd1;
	ctx.fillRect(0,20,200,90);
	
	var grd2=ctx.createLinearGradient(200,0,300,0);
	grd2.addColorStop(0,"white");
	grd2.addColorStop(1,"green");
	
	ctx.fillStyle=grd2;
	ctx.fillRect(200,20,1000,100);
</script>
</html>